<template>
    <view class="ordered-list">
        <view class="ordered-list-info" v-for="(orderItem, index1) in orderedInfo"
			:key="index1" :style="getOrderStatusStyle(orderItem.status)">
            <view class="order-orderNo">订单编号：{{ orderItem.orderNo }}</view>
            <view class="ordered-images-others">
                <scroll-view scroll-x="true" class="ordered-images">
                    <view class="image-container" v-for="(orderDetailsItem, index2) in orderItem.restaurantOrderDetailList" :key="index2">
                        <image :src="orderDetailsItem.dishImage" />
                    </view>
                </scroll-view>
                <view class="click-operation" @click="clickOrderDetails(orderItem.orderNo)">
                    <view class="ordered-others">
                        <view class="ordered-price">{{ orderItem.amount }}<uni-icons type="heart-filled" color="#ff4500" size="36rpx" style="margin-left: 5rpx;"></uni-icons></view>
                        <view class="ordered-count">共{{ orderItem.restaurantOrderDetailList.length }}件</view>
                    </view>
                    <view class="right-row">
                        <uni-icons type="right" size="20px"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="ordered-time">下单时间：{{ orderItem.orderTime }}</view>
            <view style="border-bottom: 2px solid #fff; margin: 0 10rpx;"></view>
            <view class="ordered-operation">
				<view v-if="orderItem.status === 1">
					<view v-if="currentUserId === orderItem.orderUserId">
					    <button class="order-operation-cancel" @click="cancelOrder(orderItem.orderNo)">{{operationButton.opera1}}</button>
					</view>
					<view v-else>
					    <button class="order-operation-order" @click="receivedOrder(orderItem.orderNo)">{{operationButton.opera2}}</button>
					</view>
				</view>
				<view v-else-if="orderItem.status === 2">
					<view v-if="currentUserId !== orderItem.orderUserId">
					    <button class="order-operation-cancel" @click="cancelOrder(orderItem.orderNo)">{{operationButton.opera1}}</button>
					</view>
					<view v-else>
					    <button class="order-operation-order" @click="receivedOrder(orderItem.orderNo)">{{operationButton.opera2}}</button>
					</view>
				</view>
				<view v-else-if="orderItem.status === 3">
					<view>订单已完成</view>
				</view>
				<view v-else-if="orderItem.status === 4">
					<view>订单已取消 - {{orderItem.cancelReason}}</view>
				</view>
                
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props
const props = defineProps({
    orderedInfo: {
        type: Array,
        required: true
    },
    currentUserId: {
        type: Number,
        required: true
    },
	operationButton: {
		type: Object,
		required: true
	}
});
// 根据状态返回相应的背景颜色
    const getOrderStatusStyle = (status) => {
      switch (status) {
        case 1:
          return { backgroundColor: '#D1E4F3' }; // 非常淡的蓝色，表示下单
        case 2:
          return { backgroundColor: '#FDF8E6' }; // 非常淡的黄色，表示接单
        case 3:
		  return { backgroundColor: '#E1F8E5' }; // 非常淡的绿色，表示完成
        case 4:
          return { backgroundColor: '#F5F5F5' }; // 非常淡的灰色，表示取消
        default:
          return { backgroundColor: 'transparent' }; // 默认情况下不设置背景颜色
      }
    };

// 定义 emits
const emit = defineEmits(['click-order-details', 'cancel-order', 'received-order']);

// 定义方法
const clickOrderDetails = (orderNo) => {
    emit('click-order-details', orderNo);
};

const cancelOrder = (orderNo) => {
    emit('cancel-order', orderNo);
};

const receivedOrder = (orderNo) => {
    emit('received-order', orderNo);
};
</script>

<style lang="scss" scoped>
	.ordered-list{
		// background-color: aqua; /* 设置背景颜色 */
		height: calc(100vh - 44px); /* 设置高度使其在视口内 */
		overflow-y: auto; /* 允许垂直滚动 */
		.ordered-list-info{
			width: 710rpx;
			height: 420rpx;
			margin: 20rpx;
			background-color: #D1E4F3;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			.order-orderNo{
				font-size: 12px;
				padding: 10rpx 0rpx 10rpx 10rpx;
			}
			
			.ordered-images-others{
				width: 710rpx;
				height: 170rpx;
				display: flex;
				flex-direction: row;
				padding: 10rpx;
				.ordered-images{
					width: 490rpx;
					height: 170rpx;
					display: flex;
					overflow-x: auto; /* 允许水平滚动 */
					white-space: nowrap; /* 防止换行 */
					.image-container{
						display: inline-block; /* 允许图像并排 */
						image{
							width: 130rpx;
							height: 130rpx;
							border-radius: 30rpx;
							padding: 5rpx;
						}
					}
					
				}
				.click-operation{
					display: flex;
					.ordered-others{
						width: 160rpx;
						height: 170rpx;
						// background-color: saddlebrown;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.ordered-price{
							font-size: 18px;
						}
						.ordered-count{
							padding-top: 10rpx;
							font-size: 14px;
						}
					}
					.right-row{
						width: 50rpx;
						height: 170rpx;
						// background-color: aqua;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
			}
			.ordered-time{
				padding: 10rpx 0rpx 10rpx 10rpx;
			}
			.ordered-operation{
				height: stretch;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 50rpx;
				.order-operation-button{
					background-color: #f8f8f8;
					width: 200rpx;
				}
				.order-operation-order{
					background-color: #94c86c;
					width: 200rpx;
				}
			}
		}
		
	}
</style>
